<template>
  <q-layout view="lHh Lpr lFf">
<!--    q-header 的颜色配置为淡蓝色-->
    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          电子病历评级数据质量管控平台
        </q-toolbar-title>

        <q-btn flat dense round icon="account_circle" @click="menu = true">
          <q-menu v-model="menu" anchor="top right" self="top right">
            <q-list>
              <q-item clickable v-ripple @click="logout">
                <q-item-section>退出</q-item-section>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
<!--      <q-img-->
<!--        class="absolute-top"-->
<!--        src="943558c4a925364a0551aacd856be70.png"-->
<!--        img-class="tttttttt"-->
<!--        style="height: 150px"-->
<!--      >-->
<!--        <div class="absolute-bottom bg-transparent">-->
<!--          <q-avatar size="56px" class="q-mb-sm">-->
<!--&lt;!&ndash;            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />&ndash;&gt;-->
<!--          </q-avatar>-->
<!--          <div class="text-weight-bold">{{ loginname }}</div>-->
<!--          <div></div>-->
<!--        </div>-->
<!--      </q-img>-->

      <q-img
        class="absolute-top"
        src="https://cdn.quasar.dev/img/material.png"
        style="height: 150px"
      >
        <div class="absolute-bottom bg-transparent">
          <q-avatar size="56px" class="q-mb-sm">
            <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
          </q-avatar>
          <div class="text-weight-bold">owner @li shikai </div>
          <div>@wchscu.hospital.net</div>
        </div>
      </q-img>

      <q-scroll-area
        style="
          height: calc(100% - 150px);
          margin-top: 150px;
          border-right: 1px solid #ddd;
        "
      >

      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >

        </q-item-label>
        <q-item clickable v-ripple to="/dataimport">
          <q-item-section avatar>
            <q-icon name="cloud_upload" />
          </q-item-section>
          <q-item-section> 数据导入与查询 </q-item-section>
        </q-item>

          <q-item clickable v-ripple to="/esImport">
            <q-item-section avatar>
              <q-icon name="info" />
            </q-item-section>
            <q-item-section> 所属信息查询 </q-item-section>
          </q-item>

<!--          <q-item clickable v-ripple to="/known">-->
<!--            <q-item-section avatar>-->
<!--              <q-icon name="settings" />-->
<!--            </q-item-section>-->
<!--            <q-item-section> 调度运行数据选择 </q-item-section>-->
<!--          </q-item>-->

<!--        <q-item clickable v-ripple to="/sqlgen">-->
<!--          <q-item-section avatar>-->
<!--            <q-icon name="history" />-->
<!--          </q-item-section>-->
<!--          <q-item-section> 调度查询语句生成 </q-item-section>-->
<!--        </q-item>-->


<!--          <q-item clickable v-ripple to="/esAna">-->
<!--            <q-item-section avatar>-->
<!--              <q-icon name="fas fa-cogs"  size="1.5em" color="black"/>-->
<!--            </q-item-section>-->
<!--            <q-item-section> 智能检索结果展示 </q-item-section>-->
<!--          </q-item>-->

        <!-- 新增的用户管理项 -->
        <q-item clickable v-ripple to="/user-management">
          <q-item-section avatar>
            <q-icon name="person" />
          </q-item-section>
          <q-item-section> 用户管理 </q-item-section>
        </q-item>
      </q-list>

      </q-scroll-area>
    </q-drawer>

    <q-page-container>

          <router-view />

    </q-page-container>
  </q-layout>
</template>

<script>

const linksData = [
  {
    title: 'Docs',
    caption: 'quasar.dev',
    icon: 'school',
    link: '/#/index'
  },
  {
    title: 'Github',
    caption: 'github.com/quasarframework',
    icon: 'code',
    link: 'https://github.com/quasarframework'
  },
  {
    title: 'Discord Chat Channel',
    caption: 'chat.quasar.dev',
    icon: 'chat',
    link: 'https://chat.quasar.dev'
  },
  {
    title: 'Forum',
    caption: 'forum.quasar.dev',
    icon: 'record_voice_over',
    link: 'https://forum.quasar.dev'
  },
  {
    title: 'Twitter',
    caption: '@quasarframework',
    icon: 'rss_feed',
    link: 'https://twitter.quasar.dev'
  },
  {
    title: 'Facebook',
    caption: '@QuasarFramework',
    icon: 'public',
    link: 'https://facebook.quasar.dev'
  },
  {
    title: 'Quasar Awesome',
    caption: 'Community Quasar projects',
    icon: 'favorite',
    link: 'https://awesome.quasar.dev'
  }
]

export default {
  name: 'MainLayout',
  components: {
  },
  data () {
    return {
      loginname:'',
      leftDrawerOpen: false,
      essentialLinks: linksData
    }
  },
  methods: {
    logout() {
      // 执行退出逻辑，例如清除认证信息并跳转到登录页
      this.$q.notify('已退出');
      this.$router.push('/');
    }
  },
  ted() {
    this.loginname = localStorage.getItem('LoginUser');
  }
}
</script>
<style >

.tttttttt {
  /* 使图片自动调整最合适的大小填满 div */
  width: 100%!important;
  height: 55%!important;
  /* 图片不失真的关键属性 */
  object-fit: cover!important;
  top: 40px!important;
  left:-3px!important;
}
</style>
